<template>
  <div id="app">
    <div>
      <hm-button>登录</hm-button> 
      <hm-button type="primary">按钮</hm-button> 
      <hm-button type="warning"  disabled>按钮</hm-button> 
      <hm-button type="success">按钮</hm-button> 
      <hm-button type="info">按钮</hm-button> 
      <hm-button type="danger">按钮</hm-button> 
    </div>

     <div>
      <hm-button plain >登录</hm-button> 
      <hm-button plain  type="primary">按钮</hm-button> 
      <hm-button plain  type="warning">按钮</hm-button> 
      <hm-button plain  type="success">按钮</hm-button> 
      <hm-button plain  type="info">按钮</hm-button> 
      <hm-button plain  type="danger">按钮</hm-button> 
    </div>

       
     <div>
      <hm-button plain  round >登录</hm-button> 
      <hm-button plain  round type="primary">按钮</hm-button> 
      <hm-button plain  round type="warning">按钮</hm-button> 
      <hm-button plain  round type="success">按钮</hm-button> 
      <hm-button plain  round type="info">按钮</hm-button> 
      <hm-button plain  round type="danger">按钮</hm-button> 
    </>

    <div>
      <hm-button plain circle  >录</hm-button> 
      <hm-button plain circle  type="primary">钮</hm-button> 
      <hm-button plain circle  type="warning">钮</hm-button> 
      <hm-button plain circle  type="success">钮</hm-button> 
      <hm-button plain circle  type="info">钮</hm-button> 
      <hm-button plain circle  type="danger">钮</hm-button> 
    </div>

    <div>
      <hm-button plain circle icon="hm-icon-check"  >录</hm-button> 
      <hm-button plain circle icon="hm-icon-check" type="primary">钮</hm-button> 
      <hm-button plain circle icon="hm-icon-check" type="warning">钮</hm-button> 
      <hm-button plain circle icon="hm-icon-check" type="success">钮</hm-button> 
      <hm-button plain circle icon="hm-icon-check" type="info">钮</hm-button> 
      <hm-button plain circle icon="hm-icon-check" type="danger">钮</hm-button> 
    </div>

     <div>
      <hm-button plain circle icon="hm-icon-check" ></hm-button> 
      <hm-button plain circle icon="hm-icon-check" type="primary"></hm-button> 
      <hm-button plain circle icon="hm-icon-check" type="warning"></hm-button> 
      <hm-button plain circle icon="hm-icon-check" type="success"></hm-button> 
      <hm-button plain circle icon="hm-icon-check" type="info"></hm-button> 
      <hm-button plain circle icon="hm-icon-check" disabled  @click="fn" type="danger"></hm-button> 
    </div>
   

   <div class="hm-icon hm-icon-check" ></div>
   <!-- 优化过后 -->
   <!-- <div class="hm-icon-check"></div>  -->

   <!-- <hm-button @click="visible=true">显示对话框</hm-button>


   <hm-dialog title="温馨提示" width="60%" top="10px" :visible="visible"  @close="close">
    -->
   <!-- 可以通过sync修饰符简写 -->
   <!-- <hm-dialog title="温馨提示" width="60%" top="10px" :visible.sync="visible" > -->



    <!-- <template v-slot:title >
      <h1>我是标题</h1>
    </template> -->
<!-- 
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>

     <template v-slot:footer>
          <hm-button>确定</hm-button>
          <hm-button>取消</hm-button>
     </template>

   </hm-dialog> -->



<!-- <hm-input :placeholder="'请输入用户名'" showPassword  clearable :type="'password'" name="usernmae"
  :disabled="false"
  v-model="username"
></hm-input>
 
<hm-input :placeholder="'请输入用户名'" clearable  :type="'password'" 
></hm-input>

<hm-input  :placeholder="'请输入用户名'" showPassword  :type="'password'" 
></hm-input> -->


<!-- <hm-switch v-model="active"
  active-color="#13ce66"
  inactive-color="#ff4949"
  name="username"
></hm-switch>

<hm-switch v-model="active"
></hm-switch> -->

<!-- <hm-radio label="1" v-model="gender"  name="sex">男</hm-radio>
<hm-radio label="0" v-model="gender"  name="sex">女</hm-radio>

<hm-radio label="1" v-model="gender2"  name="sex2">男2</hm-radio>
<hm-radio label="0" v-model="gender2"  name="sex2">女2</hm-radio> -->

<!-- <hm-radio label="1" v-model="gender"></hm-radio>
<hm-radio label="0" v-model="gender"></hm-radio> -->
<!-- <hm-radio label="1"  name="sex">男</hm-radio> -->

<!-- <radio-group v-model="gender" >
   <hm-radio label="1"  name="sex">男</hm-radio>
   <hm-radio label="0"  name="sex">女</hm-radio>
</radio-group>

   <hm-radio label="1" v-model="gender2" name="sex">男</hm-radio>
   <hm-radio label="0" v-model="gender2" name="sex">女</hm-radio>
 -->

<!-- <hm-checkbox v-model="active" >是否选中</hm-checkbox>

<hm-checkbox-group v-model="hobby">
  <hm-checkbox label="fge"></hm-checkbox>
  <hm-checkbox label="egsg"></hm-checkbox>
  <hm-checkbox label="fsefgs"></hm-checkbox>
</hm-checkbox-group> -->


<!-- <hm-form :model="model">
   <hm-form-item label="用户名">
     <hm-input placeholder="请输入用户名" v-model="model.user"></hm-input>
   </hm-form-item>
   <hm-form-item label="开关">
     <hm-switch v-model="model.active"></hm-switch>
   </hm-form-item>
</hm-form> -->


  </div>
</template>

<script>

export default {
  data(){
      return {
        model:{
           user:"Fe",
           active:true
        }
      }
  },
  methods: {
  
  },
}
</script>

<style lang="scss">

#app{

}
  

</style>
